<template>
    <div class="wonder">
        <div class="title">新星熠熠熠荷伢汲汲汲</div>
        <div class="contentbox">
           <Imgbox :imgList="imgList" :selectimg="selectimg" :boxmode="boxmode"></Imgbox>
           <div class="dotbox">
                <div class="zone clearfix">
                    <div class="dot" v-for="(item,index) in imgList" :key="index" :class="[{'chose':index==selectimg}]"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            imgList:
            [
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599812981439&di=45ca138ed0ec74e54950ce01e9dedec3&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599813079176&di=f344050c0a996e85c67c42405babb99d&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Frushidao%2Fpics%2Fhv1%2F20%2F108%2F1744%2F113431160.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599813107237&di=9a599dcfa137d99d9ef74828b7f72434&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599813125818&di=97ca805654d9111559c01c6092a56da4&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F52%2F52%2F01200000169026136208529565374.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599813140645&di=00e0e27323b8c9fc1f4fc9dc29093608&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110320%2F11032021067b907d3ed754dd93.jpg"
            ],
            timer:null,
            selectimg:0, //当前展示的图片下标
            boxmode:1, //1有边框 2无边框
        }
    },
    mounted(){
        this.changeImg()
    },
    methods:{
        //2s切换一次图片
        changeImg(){
            this.timer=setInterval(()=>{
                this.selectimg=(this.selectimg+1)%this.imgList.length
            },2000)
        }
    },
    destroyed(){
        clearInterval(this.timer)
        this.timer=null
    },
   
}
</script>

<style lang="scss" scoped>
.wonder{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(~@/assets/img/bigscreen/wonderbg.png) no-repeat;
    background-size: 100% 100%;
    padding-top: 1.2rem;
    .title{
        font-size: 1.02rem;
        color: #333333;
        text-align: center;
        line-height: 1.02rem;
        margin-bottom: 1rem;
    }
    .contentbox{
        width: 12.16rem;
        height: 8.34rem;
        margin:0 auto;
        position: relative;
        .dotbox{
            position: absolute;
            bottom: .6rem;
            left: 50%;
            transform: translateX(-50%);
            height: .49rem;
            width: auto;
            border-radius: .245rem;
            background: rgba($color: #000000, $alpha: .2);
            z-index: 101;
            .zone{
                padding: 0 .3rem;
                .dot{
                    background: #dcdad4;
                    width: .1378rem;
                    height: .1378rem;
                    border-radius: .689rem .689rem;
                    margin: .1811rem .075rem;
                    float: left;
                    &.chose{
                        background: #f6f6f5;
                        width: .55rem;
                        height: .2rem;
                        border-radius: .1rem .1rem;
                        margin: .145rem .075rem;
                        float: left;
                    }
                }
            }
        }
    }
}
</style>
